{% extends 'base.html' %}
{% load static %}
{% block content %}
      <section class="py-5">
      {% for good in good_list %}
        <div class="container">
          <div class="row mb-5">
            <div class="col-lg-6">
               <img src="/{{ good.goods_img }}" style="width: 450px;height: 480px;">
            </div>
            <!-- PRODUCT DETAILS-->
            <div class="col-lg-6">
              <ul class="list-inline mb-2 text-sm">
                <li class="list-inline-item m-0"><i class="fas fa-star small text-warning"></i></li>
                <li class="list-inline-item m-0 1"><i class="fas fa-star small text-warning"></i></li>
                <li class="list-inline-item m-0 2"><i class="fas fa-star small text-warning"></i></li>
                <li class="list-inline-item m-0 3"><i class="fas fa-star small text-warning"></i></li>
                <li class="list-inline-item m-0 4"><i class="fas fa-star small text-warning"></i></li>
              </ul>
              <h1>{{ good.goods_name }}</h1>
              <p class="text-muted lead">${{ good.goods_price }}</p>
              <p class="text-sm mb-4">{{ good.goods_detail }}</p>
              <div class="row align-items-stretch mb-4">
                  <ul class="list-unstyled small d-inline-block">
                <li class="px-3 py-2 mb-1 bg-white"><strong class="text-uppercase">库存:</strong><span class="ms-2 text-muted">039</span></li>
                <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">类别:</strong><a class="reset-anchor ms-2" href="#!">演示产品</a></li>
                <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">标签:</strong><a class="reset-anchor ms-2" href="#!">创新</a></li>
              </ul>
                <div class="col-sm-5 pr-sm-0">
                  <div class="border d-flex align-items-center justify-content-between py-1 px-3 bg-white border-white"><span class="small text-uppercase text-gray mr-4 no-select">数量</span>
                    <div class="quantity">
                      <button class="dec-btn p-0"><i class="fas fa-caret-left"></i></button>
                      <input class="form-control border-0 shadow-0 p-0" type="text" value="1">
                      <button class="inc-btn p-0"><i class="fas fa-caret-right"></i></button>
                    </div>
                  </div>
                </div>
                  <div class="col-sm-3 pl-sm-0"><a class="btn btn-dark btn-sm btn-block h-100 d-flex align-items-center justify-content-center px-0" href="/cart/zaddcart/{{ good.id }}/">加入购物车</a></div>
              </div>
            </div>
          </div>
        </div>

      </section>
      <ul style="width: 90%;height: 30px;list-style: none;margin-left: 5%;margin-top: -20px">
          <li style="width:120px;font-size:20px;text-align:center;float: left;background-color: whitesmoke">参数</li>
          <a href=""><li style="width:120px;font-size:20px;text-align:center;float: left;background-color: whitesmoke">实物图</li></a>
          <a><li style="width:120px;font-size:20px;text-align:center;float: left;background-color: whitesmoke">评论</li></a>
      </ul>
      <div style="margin-left: 5%;width: 90%;height: 400px;background-color: seashell">

      </div>
      {% endfor %}
<script src="{% static  '/vendor/bootstrap/js/bootstrap.bundle.js' %}"></script>
{% endblock %}

